<template>
  <div id="qinfo-setting">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <router-link to="/tool/qinfos">Q信息</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">设置</li>
        <span class="ms-auto" @click.stop="back()">返回</span>
      </ol>
    </nav>

    <template v-if="detailShowing === false">
      <div class="card col-12 px-0">
        <div class="card-body">
          <form class="row">
            <div class="col-1">
              <input
                type="textfield"
                class="form-control col-4"
                placeholder="条件值"
                v-model="name"
              />
            </div>
            <div class="col">
              <button type="button" class="btn btn-primary" @click="search()">
                查找
              </button>
              <button
                type="button"
                class="btn btn-success ms-auto float-end"
                @click="newNotice()"
              >
                新建
              </button>
            </div>
          </form>
        </div>
        <table class="table table-striped table-sm">
          <thead>
            <tr>
              <th class="hidden-md-down">条件类型</th>
              <th>条件值</th>
              <th>email</th>
              <th class="hidden-md-down">手机</th>
              <th class="hidden-md-down">微信id</th>
              <th class="hidden-md-down">生成时间</th>
              <th class="hidden-md-down">修改时间</th>
              <th class="hidden-xs"></th>
              <th class="hidden-xs"></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(info, index) in dataList">
              <td class="hidden-md-down">
                {{ getConditionTypeDesc(info.conditionType) }}
              </td>
              <td>{{ info.conditionValue }}</td>
              <td>{{ info.email }}</td>
              <td class="hidden-md-down">{{ info.mobile }}</td>
              <td class="hidden-md-down">{{ info.weixinId }}</td>
              <td class="hidden-md-down">{{ formatTime(info.createTime) }}</td>
              <td class="hidden-md-down">
                <template v-if="info.lastupdate != null">
                  {{ formatTime(info.lastupdate) }}
                </template>
              </td>

              <td class="hidden-md-down">
                <a
                  href="javascript:void(0)"
                  class="btn btn-info btn-sm"
                  @click.stop="editNotice(info)"
                  >修改</a
                >
              </td>
              <td class="hidden-md-down">
                <a
                  href="javascript:void(0)"
                  @click.stop="deleteSettings(info.id)"
                  >删除</a
                >
              </td>
            </tr>
          </tbody>
        </table>

        <div class="card-block">
          <my-pagination
            :row-count="sc.rowCount"
            :page-total="sc.pageTotal"
            :page-no="sc.pageNo"
            @next-page="nextPage"
            @prev-page="prevPage"
            @direct-page="directPage"
          ></my-pagination>
        </div>
      </div>
    </template>
    <template v-if="detailShowing">
      <div class="card col-4 offset-4">
        <div class="card-header text-center">
          <h5>新建条件</h5>
        </div>
        <div class="card-body">
          <div class="row mb-2">
            <label>条件类型</label>
            <select class="form-select" v-model="conditionType">
              <option value="0">Office</option>
              <option value="1">手机</option>
              <option value="2">eterm用户名</option>
            </select>
          </div>
          <div class="row mb-2">
            <label for="exampleFormControlInput1">条件值</label>
            <input type="text" class="form-control" v-model="conditionValue" />
          </div>
          <div class="row mb-2">
            <label for="exampleFormControlInput1">电子邮件</label>
            <input type="text" class="form-control" v-model="email" />
          </div>
          <div class="row mb-2">
            <label for="exampleFormControlInput1">手机</label>
            <input type="text" class="form-control" v-model="mobile" />
          </div>
          <div class="row mb-2">
            <label for="exampleFormControlInput1">微信</label>
            <input type="text" class="form-control" v-model="weixinId" />
          </div>
        </div>
        <div class="card-body text-end">
          <button type="button" class="btn btn-success" @click="saveNotice()">
            保存
          </button>
          <button
            type="button"
            class="btn btn-secondary btn-sm ms-5"
            @click="hideDetail()"
          >
            取消
          </button>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import MyPagination from "@/components/my-pagination.vue";
import MyButton from "@/components/my-button.vue";
import MyInput from "@/components/my-input.vue";
import { convertLongToTimeDesc } from "@/common/common.js";
import {
  searchQinfoSettings,
  saveQinfoSetting,
  deleteQinfoSetting,
} from "@/api/qinfo.js";

import $ from "jquery";

export default {
  components: {
    "my-pagination": MyPagination,
    "my-button": MyButton,
    "my-input": MyInput,
  },
  data() {
    return {
      detailShowing: false,
      pnrDetail: "",

      dataList: [],
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      name: "",

      id: 0,
      conditionType: 0,
      conditionValue: "",
      email: "",
      mobile: "",
      weixinId: "",
    };
  },
  computed: {
    // acityName() {return this.$store.state.searchParams.acityName},
  },
  mounted: function () {
    this.search();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", { loading: false });
    },
    search: function () {
      this.loading = true;
      this.loadingText = "数据加载中";

      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.name": this.name,
      };

      searchQinfoSettings(
        params,
        (v) => {
          this.dataList = v.dataList;
          this.sc = v.page;
        },
        () => {
          this.loading = false;
        }
      );
    },
    showDetail: function () {
      this.detailShowing = true;
    },
    hideDetail: function () {
      this.detailShowing = false;
    },
    getConditionTypeDesc: function (type) {
      if (type === 0) {
        return "Office号";
      } else if (type === 1) {
        return "手机号";
      } else if (type === 2) {
        return "eterm用户名";
      }
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
    reset: function () {
      this.id = 0;
      this.conditionType = 0;
      this.conditionValue = "";
      this.email = "";
      this.mobile = "";
      this.weixinId = "";
    },
    newNotice: function () {
      this.reset();
      this.showDetail();
    },
    editNotice: function (info) {
      this.reset();
      this.showDetail();

      this.id = info.id;
      this.conditionType = info.conditionType;
      this.conditionValue = info.conditionValue;
      this.email = info.email;
      this.mobile = info.mobile;
      this.weixinId = info.weixinId;
    },
    saveNotice: function () {
      const params = {
        "qinfoNotice.id": this.id,
        "qinfoNotice.conditionType": this.conditionType,
        "qinfoNotice.conditionValue": this.conditionValue,
        "qinfoNotice.email": this.email,
        "qinfoNotice.mobile": this.mobile,
        "qinfoNotice.weixinId": this.weixinId,
      };

      saveQinfoSetting(params, (v) => {
        if (v !== null) {
          if (v.status === "OK") {
            this.showErrMsg("保存成功");
            this.hideDetail();
            this.search();
          } else {
            this.showErrMsg("拒绝： " + v.errmsg, "danger");
          }
        }
      });
    },
    deleteSettings: function (id) {
      this.showLoading();

      deleteQinfoSetting(
        id,
        (v) => {
          if (v.status === "OK") {
            this.showErrMsg("操作成功");
            this.search();
          } else {
            this.showErrMsg(v.errmsg, "danger");
          }
        },
        () => this.hideLoading()
      );
    },
    formatTime: function (l) {
      return convertLongToTimeDesc(l);
    },
  },
};
</script>
